<template>
	<view class="list">
		<!-- <navBar :title="navBarTitle"></navBar> -->
		<nav-bars backState="1000" bgColor="#fff" fontColor="#000" :title="navBarTitle"></nav-bars>
		<!-- tabs -->
		<view class="tabsList" style="position: fixed;z-index: 99;text-align: center; width: 100%;box-sizing: border-box;flex: 1;border-bottom: 1px solid #eee;" v-show="navBarTitle != '话题'">
			<u-tabs
				:bar-style="tabsBottomStyle"
				:list="list"
				inactive-color="#939393"
				active-color="#C1A66C"
				:is-scroll="true"
				font-size="28"
				gutter="60"
				:current="current"
				@change="TabsChange"
			></u-tabs>
		</view>
		<!-- 列表 -->
		<view class="content" v-if="current==0">
			<!-- 员工 -->
			<view class="staffBox">
				<view class="staff">
					<view class="imgBox">
						<image :src="avatar" mode=""></image>
						{{name}}
					</view>
					<text class="tag">员工</text>
				</view>
			</view>
			<!-- 客户列表 -->
			<view class="custom">
				<view class="item" @click="toChat(item)" v-for="(item,index) in customList" :key="index">
					<image :src="item.external_data.avatar" mode=""></image>
					<view class="name">{{item.external_data.name}}</view>
				</view>
				<u-loadmore :status="statusLoading" :icon-type="iconType" :load-text="loadText" />
			</view>
		</view>
		<!-- 敏感信息 -->
		<view class="sensitive" v-if="current==1">
			<view class="Search">
				<u-search placeholder="请输入敏感词进行搜索" placeholder-color="#939393" :show-action="true" v-model="keyword"
					@change="SearchChange" @search="EnterClick" @custom="customSearch" :animation="false" action-text="搜索">
				</u-search>
			</view>
			<view class="SearchView">
				<view class="SearchHot">
					热门搜索</view>
				<view class="SearchTags">
					<view class="SearchTagsItem" v-for="(item,index) in Search" :key="index" @click="SearchTagsClick(item.name)">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import URL from '@/config/url.js';
import service_client from '@/service/client.js'
// import navBar from '@/components/navBar/navBar.vue';
export default {
	data() {
		return {
			statusLoading: 'loadmore',
			iconType: 'flower',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '实在没有了~'
			},
			list: [{
				name:'客户列表'
			},{
				name:'敏感信息'
			}],
			tabsBottomStyle: {
				'border-radius': ' 4rpx 4rpx 0rpx 0rpx',
				width: '40rpx',
				height: '8rpx',
				background: '#FFD425'
			},
			current: 0,
			page:1,
			pagesize:10,
			customList:[],
			avatar:'',
			name:'',
			qy_user_id:'',
			Search:[{
				name:'返佣'
			},{
				name:'创客'
			},{
				name:'分销'
			}],
			keyword:'',
		};
	},
	computed: {},
	onLoad(options) {
		this.avatar = options.avatar
		this.name = options.name
		this.qy_user_id = options.qy_user_id
		this.getStaffList()
	},
	onReachBottom() {
		this.page++
		let params = {
			qy_user_id:this.qy_user_id,
			page:this.page,
			pagesize:this.pagesize
		}
		console.log(params,'数据')
		service_client.getCustomer(params).then(res=>{
			console.log(res,'客户列表')
			if(res.code==1){
				if(!res.data.data.length){
					this.statusLoading = 'nomore'
				}else{
					this.statusLoading = 'loading'
				}
				this.customList = this.customList.concat(res.data.data)
			}
		})
	},
	methods: {
		// 切换tabs
		TabsChange(e){
			console.log(e,'tabs')
			this.current = e
		},
		
		// 获取客户列表
		getStaffList(){
			this.page = 1
			let params = {
				qy_user_id:this.qy_user_id,
				page:this.page,
				pagesize:this.pagesize
			}
			console.log(params,'数据')
			service_client.getCustomer(params).then(res=>{
				console.log(res,'客户列表')
				if(res.code==1){
					if(res.data.data.length<10){
						this.statusLoading = 'nomore'
					}
					this.customList = res.data.data?res.data.data:[]
				}
			})
		},
		
		// 点击客户
		toChat(item){
			uni.navigateTo({
				url:`/pages_record/pages/chatRecord/list?avatar=${item.external_data.avatar}&name=${item.external_data.name}&qy_user_id=${item.staff_qy_user_id}&external_id=${item.external_userid}`
			})
		},
		
		// 输入框内容发生变化时触发
		SearchChange(e) {
			// console.log(e);
		},
		// 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发	
		EnterClick(row) {
			if(this.keyword==''){
				uni.showToast({
					title:'请输入敏感词进行搜索',
					icon:'none'
				})
				return
			}
			uni.navigateTo({
				url: '/pages_record/pages/sensitiveList/list?keyword=' + row,
			});
		},
		// 用户点击右侧控件时触发	
		customSearch(row) {
			if(this.keyword==''){
				uni.showToast({
					title:'请输入敏感词进行搜索',
					icon:'none'
				})
				return
			} 
			uni.navigateTo({
				url: '/pages_record/pages/sensitiveList/list?keyword=' + row,
			});
		},
		
		// 点击热门搜索
		SearchTagsClick(keyword){
			uni.navigateTo({
				url:'/pages_record/pages/sensitiveList/list?keyword='+keyword
			})
		},
		
	}
};
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
.ellipsisText {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.list{
	.content{
		margin-top: 120rpx;
		position: relative;
		.staffBox{
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
		.staff{
			width: 680rpx;
			padding: 28rpx 26rpx 28rpx 32rpx;
			box-shadow: 0px 2px 14px 0px #F1F1F1;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			margin: 0rpx auto 30rpx;
			align-items: center;
			justify-content: space-between;
			.imgBox{
				display: flex;
				align-items: center;
				font: 500;
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 26rpx;
				}
			}
			.tag{
				font: 500 24rpx/24rpx PingFang SC;
				color: #C1A66C;
				padding: 8rpx 13rpx;
				border-radius: 4rpx;
				background-color: rgba(193,166,108,0.16);
			}
		}
		.custom{
			padding-top: 136rpx;
			.item{
				display: flex;
				align-items: center;
				font: 500 32rpx/32rpx PingFang SC;
				color: #333333;
				padding: 0 53rpx;
				image{
					width: 98rpx;
					height: 98rpx;
					border-radius: 50%;
					margin-right: 32rpx;
					flex-shrink: 0;
				}
				.name{
					width: 100%;
					padding: 62rpx 0;
					border-bottom: 2rpx solid #F1F1F1;
				}
			}
		}
	}
	
	.sensitive{
		height: 100%;
		background-color: #fff;
		padding-top: 120rpx;
		.Search {
			padding: 16rpx 32rpx;
			// border-top: 1px solid #f6f7fb;
		}
		
		.SearchView {
			.SearchHot {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				padding: 14rpx 32rpx 16rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		
			.SearchTags {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding: 14rpx 16rpx 16rpx 16rpx;
		
				.SearchTagsItem {
					padding: 8rpx 24rpx;
					background: #F6F7FB;
					border-radius: 24px;
					font-size: 24rpx;
					font-weight: 400;
					color: #0A0605;
					margin: 0 16rpx 28rpx 16rpx
				}
			}
		}
	}
}


</style>
